<template>
	<view class="signa" ref="signaVal">
		<canvas class="canvas" disable-scroll="true" canvas-id="mycanvas" id="mycanvas" @touchstart="touchstart"
			@touchmove="touchmove" @touchend="touchend" />
		<view class="tips">请在空白区域内书写</view>
		<canvas class="canvas" disable-scroll="true" canvas-id="mycanvas2" id="mycanvas2" />
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		getCurrentInstance,
		onMounted
	} from 'vue'
	const emits = defineEmits(['update:modelValue', 'complete'])

	const props = defineProps({
		modelValue: Boolean,
	})
	const _this = getCurrentInstance()
	watch(() => props.modelValue, e => {
		// 这里可进行 tabbar 的 显示、隐藏  不要也可以
		// 自己写
	}, {
		immediate: true, // 是否默认执行一次  默认为false
	})

	let points = reactive([]) //路径点集合 
	let signaVal = ref()
	let canvaCtx = reactive(uni.createCanvasContext('mycanvas', _this)) //创建绘图对象
	let canvaCtx2 = reactive(uni.createCanvasContext('mycanvas2', _this)) //创建绘图对象
	//设置画笔样式
	canvaCtx.lineWidth = 4;
	canvaCtx.lineCap = 'round'
	canvaCtx.lineJoin = 'round'

	const width1 = ref(0)
	const height1 = ref(0)
	onMounted(() => {
		const query = uni.createSelectorQuery().in(_this);
		query
			.select(".signa")
			.boundingClientRect((rect) => {
				width1.value = rect.width;
				height1.value = rect.height;
			})
			.exec();

	})


	//触摸开始，获取到起点
	const touchstart = e => {
		let startX = e.changedTouches[0].x
		let startY = e.changedTouches[0].y
		let startPoint = {
			X: startX,
			Y: startY
		}
		points.push(startPoint);
		//每次触摸开始，开启新的路径
		canvaCtx.beginPath();
	}
	//触摸移动，获取到路径点
	const touchmove = e => {
		let moveX = e.changedTouches[0].x
		let moveY = e.changedTouches[0].y
		let movePoint = {
			X: moveX,
			Y: moveY
		}
		points.push(movePoint) //存点
		let len = points.length
		if (len >= 2) {
			draw()
		}
	}
	//绘制路径
	const draw = () => {
		let point1 = points[0]
		let point2 = points[1]
		points.shift()
		canvaCtx.moveTo(point1.X, point1.Y)
		canvaCtx.lineTo(point2.X, point2.Y)
		canvaCtx.stroke()
		canvaCtx.draw(true)
	}
	// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
	const touchend = e => {
		points = [];
	}
	// 清空画布
	const clear = () => {
		return uni.getSystemInfo()
			.then(res => {
				canvaCtx.clearRect(0, 0, res.windowWidth, res.windowHeight);
				canvaCtx.draw(true);
				return res
			})
	}
	// 确认
	const confirm = () => {
		uni.canvasToTempFilePath({
				canvasId: 'mycanvas',
			}, _this, _this.parent)
			.then(res => {
				rotate(res.tempFilePath)
				cancel()
			})
	}
	// 取消
	const cancel = () => {
		clear().then(res => emits('update:modelValue', false))
	}
	const rotate = (tempFilePath) => {
		uni.getImageInfo({
			src: tempFilePath,
			success: (res) => {
				// let width = res.width / 2;
				// let height = res.height / 2;
				let width = height1.value;
				let height = width1.value;
				canvaCtx2.translate(width / 2, height / 2); // 将坐标原点移动到图片中心
				canvaCtx2.rotate((270 * Math.PI) / 180); // 旋转45度
				// 绘制旋转后的图片
				canvaCtx2.drawImage(tempFilePath, -width / 1.6, -height / 1.4, width, height);
				// 导出旋转后的临时图片
				canvaCtx2.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas2',
						success: (res) => {
							// const rotatedTempImagePath = res.tempFilePath;
							emits('complete', res.tempFilePath)
							cancel()
							// 在这里可以使用 rotatedTempImagePath 做进一步处理
						}
					});
				});
			}
		})
	}
	defineExpose({
		confirm,
		cancel
	})
</script>

<style scoped lang="scss">
	.signa {
		position: relative;
		overflow: hidden;
		background-color: #fff;
		height: 100%;
		width: 100%;

		.canvas {
			background-color: transparent;
			position: relative;
			z-index: 9999;
			width: 100%;
			height: 100%;
		}

		.tips {
			// 文字旋转
			position: absolute;
			transform: rotate(90deg);
			top: 150rpx;
			right: -100rpx;
			color: #999999;
			font-size: 32rpx;
		}
	}
</style>